<template>
  <div class="alarm-detail-container" v-loading="loading">
    <el-descriptions :column="2" border v-if="alarmDetail">
      <el-descriptions-item label="报警编码">{{ alarmDetail.alarm?.alarmCode }}</el-descriptions-item>
      <el-descriptions-item label="报警来源">{{ alarmDetail.alarm?.sourceName }}</el-descriptions-item>
      <el-descriptions-item label="报警类型">
        <el-tag :type="getAlarmTypeTag(alarmDetail.alarm?.alarmType)">
          {{ getAlarmTypeName(alarmDetail.alarm?.alarmType) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="报警级别">
        <el-tag :type="getAlarmLevelTag(alarmDetail.alarm?.alarmLevel)">
          {{ getAlarmLevelName(alarmDetail.alarm?.alarmLevel) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="触发时间">
        {{ formatDate(alarmDetail.alarm?.triggerTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag :type="getStatusTag(alarmDetail.alarm?.status)">
          {{ getStatusName(alarmDetail.alarm?.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="报警内容" :span="2">
        {{ alarmDetail.alarm?.alarmContent }}
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 推送记录 -->
    <el-card class="mt-20" v-if="alarmDetail?.pushRecords?.length > 0">
      <template #header>
        <span>推送记录</span>
      </template>
      <el-table :data="alarmDetail.pushRecords" style="width: 100%">
        <el-table-column prop="userName" label="接收人" width="120" />
        <el-table-column prop="pushChannel" label="推送渠道" width="120">
          <template #default="{ row }">
            {{ getPushChannelName(row.pushChannel) }}
          </template>
        </el-table-column>
        <el-table-column prop="pushTime" label="推送时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.pushTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="readStatus" label="读取状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.readStatus === 1 ? 'success' : 'info'">
              {{ row.readStatus === 1 ? '已读' : '未读' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="readTime" label="读取时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.readTime) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 处理记录 -->
    <el-card class="mt-20" v-if="alarmDetail?.handleRecord">
      <template #header>
        <span>处理记录</span>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="处理人">{{ alarmDetail.handleRecord.handlerName }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">
          {{ formatDate(alarmDetail.handleRecord.handleTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="问题原因分析" :span="2">
          {{ alarmDetail.handleRecord.reasonAnalysis }}
        </el-descriptions-item>
        <el-descriptions-item label="处理措施" :span="2">
          {{ alarmDetail.handleRecord.handleMeasure }}
        </el-descriptions-item>
        <el-descriptions-item label="处理结果">
          {{ getHandleResultName(alarmDetail.handleRecord.handleResult) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag :type="getReviewStatusTag(alarmDetail.handleRecord.reviewStatus)">
            {{ getReviewStatusName(alarmDetail.handleRecord.reviewStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核人" v-if="alarmDetail.handleRecord.reviewerName">
          {{ alarmDetail.handleRecord.reviewerName }}
        </el-descriptions-item>
        <el-descriptions-item label="审核时间" v-if="alarmDetail.handleRecord.reviewTime">
          {{ formatDate(alarmDetail.handleRecord.reviewTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核意见" v-if="alarmDetail.handleRecord.reviewOpinion" :span="2">
          {{ alarmDetail.handleRecord.reviewOpinion }}
        </el-descriptions-item>
        <el-descriptions-item label="附件" v-if="alarmDetail.handleRecord.attachmentUrl" :span="2">
          <el-link :href="alarmDetail.handleRecord.attachmentUrl" target="_blank">查看附件</el-link>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getAlarmDetail } from '@/api/prod_operate/alarm_management'

const props = defineProps({
  alarmId: {
    type: Number,
    required: true
  }
})

const loading = ref(false)
const alarmDetail = ref(null)

// 获取报警详情
const fetchDetail = async () => {
  if (!props.alarmId) return
  
  loading.value = true
  try {
    const res = await getAlarmDetail(props.alarmId)
    if (res.code === 200) {
      alarmDetail.value = res.data
    }
  } catch (error) {
    console.error('获取报警详情失败：', error)
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取报警类型标签
const getAlarmTypeTag = (type) => {
  const map = { 1: 'danger', 2: 'warning', 3: 'info' }
  return map[type] || 'info'
}

// 获取报警类型名称
const getAlarmTypeName = (type) => {
  const map = { 1: '设备故障', 2: '参数超标', 3: '通讯中断' }
  return map[type] || '未知'
}

// 获取报警级别标签
const getAlarmLevelTag = (level) => {
  const map = { 1: 'danger', 2: 'warning', 3: 'info' }
  return map[level] || 'info'
}

// 获取报警级别名称
const getAlarmLevelName = (level) => {
  const map = { 1: '紧急', 2: '重要', 3: '一般' }
  return map[level] || '未知'
}

// 获取状态标签
const getStatusTag = (status) => {
  const map = { 
    1: 'info', 
    2: 'warning', 
    3: 'warning', 
    4: 'primary', 
    5: 'success', 
    6: 'danger' 
  }
  return map[status] || 'info'
}

// 获取状态名称
const getStatusName = (status) => {
  const map = { 
    1: '未推送', 
    2: '已推送未接收', 
    3: '已接收待处理', 
    4: '处理中', 
    5: '已闭环', 
    6: '已驳回' 
  }
  return map[status] || '未知'
}

// 获取推送渠道名称
const getPushChannelName = (channel) => {
  const map = { 1: '短信', 2: 'APP', 3: '站内信', 4: '系统弹窗' }
  return map[channel] || '未知'
}

// 获取处理结果名称
const getHandleResultName = (result) => {
  const map = { 1: '问题已解决', 2: '问题暂缓解', 3: '无法处理需升级' }
  return map[result] || '未知'
}

// 获取审核状态标签
const getReviewStatusTag = (status) => {
  const map = { 0: 'warning', 1: 'success', 2: 'danger' }
  return map[status] || 'info'
}

// 获取审核状态名称
const getReviewStatusName = (status) => {
  const map = { 0: '待审核', 1: '审核通过', 2: '审核驳回' }
  return map[status] || '未知'
}

watch(() => props.alarmId, () => {
  fetchDetail()
}, { immediate: true })

onMounted(() => {
  fetchDetail()
})
</script>

<style scoped>
.alarm-detail-container {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}
</style>

